<template>
	<div class="address">
		<top-header :title="'收货地址'"></top-header>
		<div
			class="address-list"
			v-show="true"
			v-for="item of list"
			:key="item.id"
			:style="{ height: item.is_default ? '3.188406rem' : '2.463768rem' }"
		>
			<div class="address-list-item">
				<div class="address-list-item__top">
					<div class="address-list-item__avatar display-center font-size-18">{{ item.name.substring(0, 1) }}</div>
					<div class="address-list-label">
						<div class="address-list-label__name display">
							<div class="display-center">
								<span class="font-size-18">{{ item.name }}</span>
								<span class="font-size-16" style="color: #999999">{{ item.phone_stars }}</span>
							</div>
							<div>
								<van-icon name="edit" color="#919294" size=".57971rem" @click="goEdit(item)" />
								<van-icon name="delete-o" color="#919294" size=".57971rem" @click="goDelete(item.id)" />
							</div>
						</div>
						<div class="address-list-label__address font-size-16" style="color: #343434">
							{{ item.address + '&nbsp;' + item.detailed }}
						</div>
					</div>
				</div>
				<div class="default-address" v-if="item.is_default">
					<van-image fit="contain" class="default-address-img" :src="require('@/assets/icon/morendizhi@3x.png')" />
					<span class="size-14 font-color-343434">默认地址</span>
				</div>
			</div>
		</div>
		<default v-show="false" :img="require('@/assets/image/shouhuo@3x.png')" text="暂无收货地址"></default>
		<div class="add-address-button display-center" @click="onAdd">
			<van-button type="default" icon="plus">新增收货地址</van-button>
		</div>
	</div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import Default from '@/components/Default';

export default {
	name: 'index',
	components: {
		TopHeader,
		Default,
	},
	data() {
		return {
			checked: '1', //默认地址check标识
			list: [], //地址列表
		};
	},
	mounted() {
		this.getAddressList();
	},
	methods: {
		onAdd() {
			//去往新增地址
			this.$router.push('/AddAddress');
		},
		goEdit(data) {
			//去往编辑地址
			this.$router.push({ path: '/AddAddress', query: { address_info: data } });
		},
		goDelete(id) {
			//删除地址
			this.$dialog
				.confirm({
					title: '确认删除该收货地址？',
				})
				.then(() => {
					_api
						.api_userPortal_sysAddress_destroy({ sys_address_ids: id })
						.then((res) => {
							this.$toast.success('删除成功');
							this.getAddressList();
						})
						.catch((error) => {
							console.log(error);
							this.$toast.fail('删除失败');
						});
				})
				.catch(() => {});
		},
		getAddressList() {
			//获取地址列表
			_api
				.api_userPortal_sysAddress_getListByCon()
				.then((res) => {
					this.list = res.data.data;
					this.list.forEach((x) => {
						//隐藏手机号中间四位
						x.phone_stars = x.phone.replace(x.phone.substring(3, 7), '****');
					});
				})
				.catch((error) => {
					console.log(error);
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.address {
	background-color: #f9f9f9;
	height: 100vh;

	.address-list {
		width: 9.299517rem;
		height: 3.188406rem;
		background-color: white;
		margin: 0.362319rem 0.362319rem 0 0.362319rem;
		border-radius: 0.144928rem;

		.address-list-item {
			margin: 0 0.410628rem;
			display: flex;
			flex-direction: column;

			.address-list-item__top {
				display: flex;
				align-items: center;
				height: 2.294686rem;

				.address-list-item__avatar {
					width: 0.966184rem;
					height: 0.966184rem;
					background: #d4e3ff;
					border-radius: 50%;
					color: #6899f4;
				}

				.address-list-label {
					width: 7.246377rem;
					margin-left: 0.2657rem;

					.address-list-label__name {
						display: flex;
						align-items: center;
						margin-bottom: 0.193237rem;
					}
				}
			}

			.default-address {
				padding-top: 0.217391rem;
				border-top: 0.024155rem solid #e8e8e8;
				display: flex;
				align-items: center;

				.default-address-img {
					width: 0.386473rem;
					height: 0.386473rem;
					margin-right: 0.2657rem;
				}
			}
		}
	}

	.add-address-button {
		width: 100%;
		height: 1.15942rem;

		.van-button--default {
			width: 8.405797rem;
			background: linear-gradient(180deg, #adc9fc, #6899f4);
			border-radius: 24px;
			position: fixed;
			bottom: 0.821256rem;

			.van-button__icon,
			.van-button__text {
				color: white;
			}
		}
	}
}
</style>
